<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer roleListPage">
      <!-- 角色管理 -->
      <div class="table-serch-bar clearfix">
        <div class="fl">
          <el-form ref="form" :inline="true" :model="form" size="medium">
            <el-form-item label>
              <el-input v-model="form.value" placeholder="请输入角色名关键字搜索" clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button size="medium" @click="centerDialogVisible = true">
            <i class="iconfont iconuser1"></i> 添加角色
          </el-button>
        </div>
      </div>
      <el-table
        class="my-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号"></el-table-column>
        <el-table-column align="center" prop="name" label="角色名"></el-table-column>
        <el-table-column align="center" prop="description" label="角色描述"></el-table-column>
        <el-table-column align="center" prop="value3" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="showEdit(scope.row)">编辑</el-button>
            <el-button size="mini" @click="handleRole(scope.$index, scope.row)">权限</el-button>
            <el-button
              size="mini"
              class="border-danger-btn"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-tools clearfix">
        <div class="pagination fr">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.pageSize"
              layout="prev, pager, next, jumper"
              :total="pageInfo.total"
            ></el-pagination>
          </div>
        </div>
      </div>
      <!-- 角色管理结束 -->
    </div>

    <!-- 添加角色 -->
    <el-dialog
      :title="formAdd.modalTitle"
      :visible.sync="centerDialogVisible"
      class="custom-dialog userImageUpload"
      width="480px"
      center
    >
      <div class="role-input-modal">
        <el-form label-position="left" label-width="70px" :model="formAdd">
          <el-form-item label="角色名">
            <el-input v-model="formAdd.name"  maxlength="20" :show-word-limit="true"></el-input>
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="formAdd.description" maxlength="200" :show-word-limit="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加角色结束 -->
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "roleList",
  data() {
    return {
      tableData: [],
      // 搜索表单
      form: {
        value: ""
      },
      currentPage3: 1,
      // 添加表单
      formAdd: {
        modalTitle:"添加角色",
        type:0,
        id:null,
        name: "",
        description: "",
      },
      pageInfo:{
        total:0,
        pageSize:10,
        page:1
      },
      centerDialogVisible: false
    };
  },
  created() {
    this.getList();

  },
  watch:{
    centerDialogVisible(v){
      if(!v){
        this.formAdd={
          modalTitle:"添加权限",
          type : 0,
          name: "",
          description: ""
        }
      }
    }
  },
  methods: {
    getList: function () {
      console.log(this.cityName);
      //let key = this.cityName?this.cityName.split(',')[1]:'';
      Http.api.get("/role/search",{
        params:{
          key:this.form.value,
          page:this.pageInfo.page,
          pageSize:this.pageInfo.pageSize
        }
      }).then((res) => {
        this.tableData = res.data.content ;
        this.pageInfo.total=res.data.total;
      });
    },
    handleCurrentChange(val) {
      this.getList();
    },
    handleSelectionChange: function (val) {
      this.selected = val;
    },
    onSubmit() {
      this.getList();
    },
    // 权限
    handleRole(index, row) {
      if(row.permissions==JSON.parse(localStorage.user).rootKey){
         this.$message.error("root角色不能编辑");
         return;
      }
      console.log(row);
      this.$router.push({path: "/system/editRole",query:{id:row.id}});
    },
    // 删除
    handleDelete(index, row) {
     if(row.permissions==JSON.parse(localStorage.user).rootKey){
         this.$message.error("root角色不能删除");
         return;
      }
      Http.api.delete("role/"+row.id)
        .then(()=>{
            this.tableData.splice(index,1);
        })
    },
    addRole(){

      Http.api.post("/role",this.formAdd)
        .then((res)=>{
            this.tableData.push(res.data)
            this.formAdd={
              modalTitle:"添加权限",
              type : 0,
              name: "",
              description: ""
            }
            this.centerDialogVisible = false
        })
    },
    showEdit(item){

       if(item.permissions==JSON.parse(localStorage.user).rootKey){
         this.$message.error("root角色不能编辑");
         return;
      }
      this.formAdd={
        modalTitle:"编辑权限",
        type:1,
        id:item.id,
        name: item.name,
        description: item.description
      }
      this.centerDialogVisible = true
    },
    editRole(){
      Http.api.put("/role/"+this.formAdd.id,this.formAdd)
        .then((res)=>{
          this.tableData.push(res.data)
          this.formAdd={
            modalTitle:"添加权限",
            type : 0,
            name: "",
            description: ""
          }
          this.centerDialogVisible = false;
          this.getList();
        })
    },
    submit(){
      switch (this.formAdd.type) {
        case  0 : this.addRole();
                  break;
        case  1 : this.editRole();
                  break;
      }
    }
  }
};
</script>

